<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>bootstrap表单的使用（11.23）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            margin-top: 100px;
        }
    </style>
    
</head>
<body>
    
    <div class="container">
        <h2>输入框组</h2>
        <form class="">
            <div class="input-group mt-3 input-group-lg" >
                <div class="input-group-prepend">
                    <span class="input-group-text">@</span>
                </div>
                <input type="text" class="form-control">
                </div>

                <div class="input-group-prepend">
                    <!-- <span class="input-group-text">@</span> -->
                    <div class="input-group-text">
                        <input type="radio" >
                    </div>
                </div>
                <input type="text" class="form-control">
                </div>
            </div>
            <div class="input-group mt-3">
                <input type="text" class="form-control">
                <div class="input-group-append">
                    <span class="input-group-text">@</span>
                </div>
            </div>
            
        </form>


        <div class="input-group mt-3 " >
            <input type="text" class="form-control">
            <div class="input-group-append">
                <input type="button" class="btn btn-primary" value="ok">
                <input type="button" class="btn btn-danger" value="cancel">
            </div>
        </div>

    </div>
    

        


    <div class="container">
        <h2>bootstrap图标</h2>
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
        </svg>

        <h2>Font Awesome 图标</h2>
        <i class="fa fa-car"></i>
        <i class="fa fa-car fa-3x"></i>
        <i class="fa fa-car" style="font-size:80px;"></i>
        <i class="fa fa-car" style="font-size:160px;color:red;"></i>

        <ul class="fa-ul">
            <li><i class="fa-li fa fa-check-square"></i>你好，小向同学</li>
            <li><i class="fa-li fa fa-spinner fa-spin"></i>你好，小向同学</li>
            <li><i class="fa-li fa fa-square"></i>你好，小向同学</li>
        </ul>

        <h3>fa fa-area-chart</h3>

        <i class="fa fa-area-chart"></i>
        <i class="fa fa-area-chart" style="font-size:40px"></i>
        <i class="fa fa-area-chart" style="font-size:80px"></i>
        <i class="fa fa-area-chart" style="font-size:120px;color:red"></i>
        <br>

        <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>

        <i class="fa fa-spinner fa-spin"></i>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-cog fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>
        


        <p>按钮中使用:</p>
        <button style="font-size:24px">按钮 <i class="fa fa-area-chart"></i></button>

        <p>Unicode:</p>
        <i style="font-size:24px" class="fa">&#xf1fe</i>


        <i class="fa fa-shield"></i>
        <i class="fa fa-shield fa-rotate-90"></i>
        <i class="fa fa-shield fa-rotate-180"></i>
        <i class="fa fa-shield fa-rotate-270"></i>
        <i class="fa fa-shield fa-flip-horizontal"></i>
        <i class="fa fa-shield fa-flip-vertical"></i>


        <h2>输入框组带下拉菜单按钮</h2>
        <div class="input-group mt-3" >
            <div class="input-group-prepend">
                <!-- btn-secondary 灰色 -->
                <!-- dropdown-toggle 下拉切换 -->
                <!-- data-toggle="dropdown" -->
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button>
                <!-- 展开之后的div -->
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                </div>
                
            </div>
            <input type="text" class="form-control">
        </div>


        <h2>多图叠加</h2>
        <span class="fa-stack fa-lg">
            <!-- 圈圈 -->
            <i class="fa fa-circle-thin fa-stack-2x "></i>
            <!-- fa-inverse -->
            <!-- 小鸟 -->
            <i class="fa fa-twitter fa-stack-1x "></i>
        </span>
            fa-twitter on fa-circle-thin<br>
    
        <span class="fa-stack fa-lg">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
        </span>
            fa-twitter (inverse) on fa-circle<br>
        
        <span class="fa-stack fa-lg">
            <i class="fa fa-camera fa-stack-1x"></i>
            <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
        </span>
            fa-ban on fa-camera

        <h2>垂直表单</h2>
        <form>
            <div class="form-group">
                <label for="">账号</label>
                <input type="text" id="username" class="form-control" placeholder="请输入账号："></input>
            </div>
            <div class="form-group">
                <label for="">账号</label>
                <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
            </div>

            <button class="btn btn-primary  active">登录</button>
        </form>

        
        
        <h2>内联表单</h2>
        
        <form class="form-inline">
            <div class="form-group">
                <label for="">账号</label>
                <input type="text" id="username" class="form-control" placeholder="请输入账号："></input>
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
            </div>

            <button class="btn btn-primary  active">登录</button>
        </form>


        <h2>水平表单</h2>
        <form >
            <div class="row">
                <label for="username" class="col-md-2 text-center" >账号</label>
                <div class="col-md-7">
                    <input type="text" id="username" class="form-control" placeholder="请输入账号："></input>
                </div>
            </div>

            <div class="row">
                <label for="pass" class="col-md-2 text-center" >密码</label>
                <div class="col-md-7">
                    <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
                </div>
            </div>

            <div class="row mt-1">
                <div class="col-md-1  offset-md-1">
                    <button class="btn btn-primary  active">登录</button>
                </div>
                
            </div>
            
        </form>

        <h2>下拉菜单</h2>
        <form>
            <div class="form-group">
                <label for="city">选择你喜欢的城市</label>
                <select class="form-control" id="city" name="city" >
                    <option value="">广元</option>
                    <option value="">成都</option>
                    <option value="">泸州</option>
                    <option value="">巴中</option>
                    <option value="">乐山</option>
                    <option value="">绵阳</option>
                </select>
            </div>

        </form>
        

        <h2>文本域</h2>
        <form >
            <div class="form-group">
                <label for="content">评论：</label>
                <textarea class="form-control" rows="5" id="content" name="content" ></textarea>
            </div>
        </form>


        <h2>复选框按钮</h2>
        <form>
            <div class="form-check  ">
                <!-- "form-check-lg/sm  "大小 尺寸 -->
                <!-- <label for="form-check-label"> -->
                    <!-- disabled 禁用 -->
                    <!-- 官网推荐 -->
                    <input type="checkbox" class="form-check-input "disabled>
                    <label for="form-check-label">option1（禁用）</label><br>
                    <input type="checkbox" class="form-check-input">
                    <label for="form-check-label">option2</label><br>
                    <input type="checkbox" class="form-check-input">
                    <label for="form-check-label">option3</label><br>
                    <input type="checkbox" class="form-check-input">
                    <label for="form-check-label">option4</label><br>

                <!-- </label> -->
                
            </div>
        </form>

        <form>
            <!-- form-check-inline 显示在一行 -->
            <div class="form-check form-check-inline">
                <label for="form-check-label">
                    <!-- disabled 禁用 -->
                    <input type="checkbox" class="form-check-input "disabled>option1（禁用）
                    <input type="checkbox" class="form-check-input">option2
                    <input type="checkbox" class="form-check-input">option3
                    <input type="checkbox" class="form-check-input">option4

                </label>
                
            </div>
        </form>

        <h2>单选按钮</h2>
        <form>
            <div class="radio">
                <label for="">
                    <input type="radio" name="option">option1
                </label>
            </div>
            <div class="radio">
                <label for="">
                    <input type="radio" name="option">option1
                </label>
            </div>
        </form>


        <h2>颜色通验证</h2>
        <form class="was-validated">
            <div class="form-group">
                <label for="">账号</label>
                <!-- required="" 必填  placeholder="" 点位符 -->
                <input type="text" required="" placeholder=""id="username" class="form-control"  placeholder="请输入账号："></input>
            </div>
            <div class="form-group">
                <label for="">账号</label>
                <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
            </div>

            <button class="btn btn-primary  active">登录</button>
        </form>


        
    </div>


    
</body>
</html>